
window.onload = async function(){
    const res =await get('/dashboard')
    const{data:{overview,year,salaryData,groupData,provinceData}}=res

    for(let key in overview) {
        document.querySelector('[name='+key).innerHTML=overview[key]
    }
xinZi(year)
console.log(res);
   bing(salaryData)
zhu(groupData)

const btns =document.querySelector('#btns')
btns.addEventListener('click',function(e){
if (e.target.tagName==='BUTTON') {
 
  btns.querySelector('.btn-blue')?.classList.remove('btn-blue');
  e.target.classList.add('btn-blue')
  zhu(groupData,e.target.innerText);
}
})
initSalaryPieChart(salaryData)
initMapChart(provinceData)
}
const xinZi =function(year){
    var chartDom = document.getElementById('line');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: year.map(item=>item.month),
    axisLine: {
        lineStyle: {
          color: "red",
          type: "dashed",
        },
      },
  },
 

  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
          color: ['#aaa', '#ddd'],
          type:'dashed',
      },
  }, },
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    //网格距离上方距离
        top: "20%",
      },

      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#499FEE", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#5D75F0", // 100% 处的颜色
            },
          ],
        },
      ],




  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ],
  

};

option && myChart.setOption(option);
}
const bing =function(data){
  var chartDom = document.getElementById('salary');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '班级薪资分布',
    top: '10',
    left: '10'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '85%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data.map(item=>{
        return {
          name:item.label,
          value:item.b_count+item.g_count
        }
      })
    }
  ]
};

option && myChart.setOption(option);
}
const zhu =function(data,qwer=1){
  var chartDom = document.getElementById('lines');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: "category",
    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'ooi'],
    data: data[qwer].map((item) => item.name),
    axisLine: {
      lineStyle: {
        color: "#ccc",
        type: "dashed",
      },
    },
    axisLabel: {
      color: "#999",
    },
  },
  
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        type: "dashed",
      },
    },
  },
  color: [
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "#34D39A", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "rgba(52,211,154,0.2)", // 100% 处的颜色
        },
      ],
    },
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "#499FEE", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "rgba(73,159,238,0.2)", // 100% 处的颜色
        },
      ],
    },
  ],
  series: [
    {
      data: data[qwer].map(item=>item.hope_salary),
      type: 'bar',
      name:'期望薪资'
    },
    {
      data: data[qwer].map(item=>item.salary),
      type: 'bar',
      name:'就业薪资'
    }
  ]
  
};

option && myChart.setOption(option);

}




const initSalaryPieChart = (data) => {
  const myEchart = echarts.init(document.querySelector("#gender"));
  myEchart.setOption({
    title: [
      {
        text: "男女薪资分布",
        left: 10,
        top: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: "男生",
        left: "50%",
        top: "45%",
        textAlign: "center",
        textStyle: {
          fontSize: 12,
        },
      },
      {
        text: "女生",
        left: "50%",
        top: "85%",
        textAlign: "center",
        textStyle: {
          fontSize: 12,
        },
      },
    ],
    color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: 50,
        radius: ["20%", "30%"],
        center: ["50%", "30%"],
        datasetIndex: 1,
        // data: [{name:'1万以下',value: 4},...]
        data: data.map((item) => ({ name: item.label, value: item.b_count })),
      },
      {
        type: "pie",
        radius: 50,
        radius: ["20%", "30%"],
        center: ["50%", "70%"],
        datasetIndex: 2,
        // data: [{name:'1万以下',value: 4},...]
        data: data.map((item) => ({ name: item.label, value: item.g_count })),
      },
    ],
  });
};

const initMapChart = (data) => {
  const myEchart = echarts.init(document.querySelector("#map"));
  const dataList = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];
  dataList.forEach((item) => {
    const obj = data.find(
      (it) =>
        it.name.replace(
          /省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g,
          ""
        ) === item.name
    );
    if (obj) item.value = obj.value;
  });
  let option = {
    title: {
      text: "籍贯分布",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 位学员",
      borderColor: "transparent",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: "left",
      bottom: "20",
      text: ["6", "0"],
      inRange: {
        color: ["#ffffff", "#0075F0"],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: "china",
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)",
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)",
          color: "#e0ffff",
        },
        emphasis: {
          areaColor: "#34D39A",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        name: "籍贯分布",
        type: "map",
        geoIndex: 0,
        data: dataList,
      },
    ],
  };
  myEchart.setOption(option);
};